<template>
	<view class="t-content">
		<view class="t-wrap">
			<view class="bsrm-loader">
				<view :style="{'border-color': '#00c386'}"></view>
				<view :style="{'border-color': '#00c386'}"></view>
				<view :style="{'border-color': '#00c386'}"></view>
			</view>
			<view class="t-tip" :style="[{'margin-top':'60rpx'}]">测评中</view>
		</view>
	</view>
</template>

<script setup lang="ts">
</script>

<style lang="scss" scoped>
.t-content{
	position: fixed;
	z-index: 999999;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.t-wrap{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 350rpx;
	height: 350rpx;
	background-color: #fff;
	padding-top: 60rpx;
	border-radius: 16rpx;
}
.t-tip {
	font-size: 26rpx;
	margin-top: 40rpx;
	max-width: 600rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #00c386;
}
@keyframes ball-scale-ripple-multiple {
	0% {
		-webkit-transform: scale(0.1);
		transform: scale(0.1);
		opacity: 1;
	}

	70% {
		-webkit-transform: scale(1);
		transform: scale(1);
		opacity: 0.7;
	}

	100% {
		opacity: 0.0;
	}
}

.bsrm-loader {
	position: relative;
	-webkit-transform: translateY(-80rpx);
	transform: translateY(-80rpx);
}

.bsrm-loader>view:nth-child(0) {
	-webkit-animation-delay: -0.8s;
	animation-delay: -0.8s;
}

.bsrm-loader>view:nth-child(1) {
	-webkit-animation-delay: -0.6s;
	animation-delay: -0.6s;
}

.bsrm-loader>view:nth-child(2) {
	-webkit-animation-delay: -0.4s;
	animation-delay: -0.4s;
}

.bsrm-loader>view:nth-child(3) {
	-webkit-animation-delay: -0.2s;
	animation-delay: -0.2s;
}

.bsrm-loader>view {
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	position: absolute;
	top: -2px;
	width: 80rpx;
	height: 80rpx;
	border-radius: 100%;
	border: 2px solid #fff;
	-webkit-animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
	animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
}
</style>